<template>
    <div>
        <div id="main"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'ElementTestBase',

    data() {
        return {
            myChart: null,
        };
    },

    mounted() {
        this.getEcharts();
    },

    methods: {
        getEcharts() {
            if (
                this.myChart != null &&
                this.myChart != "" &&
                this.myChart != undefined
            ) {
                this.myChart.dispose(); //解决echarts dom已经加载的报错
            }
            this.myChart = echarts.init(document.getElementById('main'));
            // 绘制图表
            this.myChart.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            });
        }
    },
};
</script>

<style lang="less" scoped>
#main {
    width: 300px;
    height: 300px;
}
</style>